<template>
<!--    人脸识别-->
    <div class="recognition">
        <div class="loading" v-if="star">
            <van-loading size="1rem" vertical class="load">加载中...</van-loading>
        </div>
        <defeated v-if="flag"  @again="resume" @complete="finish"></defeated>
        <div class="index" v-if="!flag">
            <div class="sketch">
                <div class="sketch_img"></div>
                
                <p class="attention">
                    正面平视手机、保证光线充足<br>
                    请勿遮挡面部
                </p>
            </div>
            <div class="box">
            
                <div class="arrangement">
                    <div class="arrangement_inner">
                        <p><span>1</span><span>牢记验证码，点击开始录制</span></p>
                        <p class="arrangement_line"></p>
                    </div>
                    <div class="arrangement_inner">
                        <p><span>2</span><span>开启前置摄像头，用普通话朗读数字</span></p>
                        <p class="arrangement_line"></p>
                    </div>
                    <div class="arrangement_inner">
                        <p><span>3</span><span>完成录制，等待录制结果</span></p>
                    </div>

                </div>
                <van-button type="info" @click="action" class="next">下一步</van-button>
            </div>
            <van-overlay :show="show">
                    <face v-if="show" :key="timer" @del="delbox" @count="number" @block="defeated" @load = "loade" :star ="star"></face>
            </van-overlay>
        </div>
    </div>

</template>

<script>
    import face from "./face"
    import defeated from "./defeated"
    export default {
        name: 'index',
        components:{face,defeated},
        data () {
            return{
               timer:"",
                show:false,
                flag:false,
                star:false,
                gettime:"",
            }
        },
        methods:{
            getTime:function(){
                var _this = this
                let yy = new Date().getFullYear()
                var mm =new Date().getMonth() < 10 ? "0" + (new Date().getMonth() + 1) : new Date().getMonth() + 1
                var dd = new Date().getDate() <10 ? "0" + new Date().getDate() : new Date().getDate()
                let hh = new Date().getHours()
                let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes()
                let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds()
                _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
            },
            number(res){
                if(res===0){
                    this.action()
                    this.star = false
                }
            },
            delbox(res){
                this.show = res
            },
            finish(){
                this.show = this.flag  = false
            },
            resume(){
                this.flag = false
            },
            defeated(res){
                this.getTime()
                localStorage.setItem("time",JSON.stringify(this.gettime))
                 if(res.err_no!==0){
                 this.flag = true
                     this.star = false
                 }else{
                     this.show =  this.star = false
                     if(res.result.score){
                         console.log(this.gettime)
                         console.log(this.$store.state.slite)
                     }
                 }
            },
            action(){
                
                this.show = true
                this.timer = new Date().getTime()
            },
            loade(){
            this.star = true

            }
            }
    }
</script>

<style lang="scss" scoped>
    .recognition{
        height: 84%;
        .loading{
            width: 100%;
            height: 100%;
            z-index: 9999;
            position: absolute;
            background: rgba(0,0,0,0.5);
            top: 0;
            left: 0;
            .load{
                color: #fff;
              top: 50%;
               .van-loading__text{
                   color: #fff;
                   font-size: 0.35rem;

               }
            }
        }
    }
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .block {
        width: 120px;
        height: 120px;
        background-color: #fff;
    }
    .sketch{
        background: hsla(0,0%,88%,.35);
        height: 6rem;
        .sketch_img{
            width: 3rem;
            height:4rem;
            margin: 0 auto;
            background: url(//aip.bdstatic.com/faceliveness/dist/1523595724898/images/sketch.png) 0 0 no-repeat;
            -moz-background-size: 100% auto;
            background-size: 100% auto;
        }
        .attention{
            font-size: 0.29rem;
            color: #999;
            text-align: center;
            margin-top: 0.6rem;
        }
    }
    .box{
        position: relative;
       top: 0.5rem;
    }
    .arrangement{
         font-size: 0.3rem;
         .arrangement_inner{
             margin-left:1.3rem;
             :nth-child(1){
                 :nth-child(1){
                     width:0.3rem;
                     height: 0.3rem;
                     display: inline-block;
                     color:#0073eb;
                     border: 0.01rem solid #0073eb;
                     border-radius: 50%;
                     text-align: center;
                     line-height: 0.3rem;
                 }
            :nth-child(2){
                margin-left: 0.2rem;
            }
             }
         .arrangement_line{
             border-left: 0.01rem dashed #0073eb;
           padding: 0.3rem 0;
             margin-left: 0.15rem;

          }
         }
    }
    .next{
        width: 80%;
        height: 1rem;
        margin-left: 10%;
        margin-top: 0.7rem;
    }
</style>